Merge pull request #34 from globalfund/feat/CMS-items

feat: add static text to CMS

.github/workflows/main.yml

@@ -35,7 +35,8 @@ jobs:
             ]
           extra_plugins: |
             "@semantic-release/commit-analyzer"
-            "@semantic-release/release-notes-generator"
+            "@semantic-release/release-notes-generator@10.0.3"
             "@semantic-release/github"
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          RUNNER_DEBUG: 1

src/app/components/Charts/Eligibility/DotChart/index.tsx

@@ -156,7 +156,7 @@ export function DotChart(props: DotChartProps) {
                   }
                 `}
               >
-                Eligibility
+                {get(cmsData, "componentsChartsEligibility.eligibility", "")}
               </div>
               <div
                 css={`

src/app/components/Charts/GeoMap/index.tsx

@@ -816,7 +816,7 @@ export function GeoMap(props: GeoMapProps) {
                     );
                   }}
                 >
-                  Country Detail Page
+                  {get(cmsData, "componentsChartsGeomap.countryDetail", "")}
                 </TooltipButton>
               </div>
             )}

src/app/components/Charts/Investments/TimeCycle/components/tooltip/index.tsx

@@ -27,7 +27,8 @@ export function InvestmentsTimeCycleTooltip(props: any) {
           font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
         `}
       >
-        Year {props.indexValue}
+        {get(cmsData, "componentsChartsInvestments.year", "")}{" "}
+        {props.indexValue}
       </div>
       <div
         css={`

src/app/components/Charts/Investments/TimeCycle/index.tsx

@@ -165,7 +165,7 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
             {isMobile && (
               <Grid item xs={12} css="font-size: 12px !important;">
                 <b>
-                  {get(cmsData, "componentsChartsInvestments.totalAmount", "")}:{" "}
+                  {get(cmsData, "componentsChartsInvestments.totalAmount", "")}{" "}
                   {formatFinancialValue(totalInvestmentValue)}
                 </b>
               </Grid>
@@ -185,7 +185,8 @@ export function InvestmentsTimeCycle(props: InvestmentsTimeCycleProps) {
                     }
                   `}
                 >
-                  Investments - {props.type || "Disbursement"}
+                  {get(cmsData, "componentsChartsInvestments.investments", "")}{" "}
+                  {props.type || "Disbursement"}
                 </div>
                 <div css="font-weight: normal;">
                   {formatFinancialValue(totalInvestmentValue)}

src/app/components/Charts/common/dialogBox/index.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreActions } from "app/state/store/hooks";
 import {
   overlaycss,
@@ -27,7 +29,7 @@ export default function ReRouteDialogBox(props: Props) {
   const clearDataPathSteps = useStoreActions(
     (actions) => actions.DataPathSteps.clear
   );
-
+  const cmsData = useCMSData({ returnData: true });
   const handleYesClick = () => {
     clearDataPathSteps();
     if (props.handleClick) {
@@ -47,21 +49,28 @@ export default function ReRouteDialogBox(props: Props) {
             margin: 0;
           `}
         >
-          You are navigating to a {props.display.pageType || "grant"} page.
+          {get(cmsData, "componentsDialogBox.navigating", "")}{" "}
+          {props.display.pageType || "grant"}{" "}
+          {get(cmsData, "componentsDialogBox.page", "")}
         </p>
         <p
           css={`
             margin-top: 0;
           `}
         >
-          New pathway will be formed according to your new search.
+          {get(cmsData, "componentsDialogBox.info", "")}
         </p>
         <p
           css={`
             margin: 2rem 0;
           `}
         >
-          <b>Continue to {props.display.pageType || "grant"} page?</b>
+          <b>
+            {" "}
+            {get(cmsData, "componentsDialogBox.continueToPage", "")}{" "}
+            {props.display.pageType || "grant"}{" "}
+            {get(cmsData, "componentsDialogBox.pageRequest", "")}
+          </b>
         </p>
         <div
           css={`
@@ -77,10 +86,10 @@ export default function ReRouteDialogBox(props: Props) {
               props.setDisplay({ ...props.display, display: false })
             }
           >
-            <b>No</b>
+            <b>{get(cmsData, "componentsDialogBox.no", "")}</b>
           </button>
           <button type="button" onClick={handleYesClick}>
-            <b>Yes</b>
+            <b>{get(cmsData, "componentsDialogBox.yes", "")}</b>
           </button>
         </div>
       </div>

src/app/components/PageHeader/components/filterbar/index.tsx

@@ -105,7 +105,9 @@ export function MobileFilterBar() {
 
   return (
     <div css={styles.container}>
-      <div css={styles.label}>Your selections</div>
+      <div css={styles.label}>
+        {get(cmsData, "componentsPageHeader.mobileFilterBar", "")}
+      </div>
       <div css={styles.chipsContainer}>
         {chips.map((chip: any) => {
           return <Chip {...chip} key={chip.type} onDelete={onDelete} />;

src/app/components/Table/Expandable/Toolbar.tsx

@@ -6,6 +6,7 @@ import { exportCSV } from "app/utils/exportCSV";
 import Toolbar from "@material-ui/core/Toolbar";
 import Popover from "@material-ui/core/Popover";
 import CloseIcon from "@material-ui/icons/Close";
+import { useCMSData } from "app/hooks/useCMSData";
 import SearchIcon from "@material-ui/icons/Search";
 import IconButton from "@material-ui/core/IconButton";
 import { useStoreState } from "app/state/store/hooks";
@@ -29,7 +30,7 @@ export function TableToolbar(props: TableToolbarProps) {
   const location = useLocation();
   const params = useParams<{ code?: string }>();
   const vizData = useGetAllVizData();
-
+  const cmsData = useCMSData({ returnData: true });
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
     null
@@ -249,7 +250,7 @@ export function TableToolbar(props: TableToolbarProps) {
               margin-bottom: 20px;
             `}
           >
-            Show columns
+            {get(cmsData, "componentsTable.showColumns", "")}
           </div>
           <FormGroup>
             {props.columns.map((c, index) => (

src/app/components/Table/Expandable/index.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import get from "lodash/get";
 import filter from "lodash/filter";
 import { appColors } from "app/theme";
 import findIndex from "lodash/findIndex";
 import Table from "@material-ui/core/Table";
+import { useCMSData } from "app/hooks/useCMSData";
 import Collapse from "@material-ui/core/Collapse";
 import TableRow from "@material-ui/core/TableRow";
 import TableHead from "@material-ui/core/TableHead";
@@ -200,6 +202,7 @@ function Row(props: {
 
 export function ExpandableTable(props: ExpandableTableProps) {
   const [toolbarCols, setToolbarCols] = React.useState<TableToolbarCols[]>([]);
+  const cmsData = useCMSData({ returnData: true });
 
   function onColumnViewSelectionChange(e: React.ChangeEvent<HTMLInputElement>) {
     const updatedToolbarCols = [...toolbarCols];
@@ -219,7 +222,7 @@ export function ExpandableTable(props: ExpandableTableProps) {
   return (
     <TableContainer>
       <TableToolbar
-        title="Documents"
+        title={get(cmsData, "componentsTable.documents", "")}
         search={props.search}
         columns={toolbarCols}
         onSearchChange={props.onSearchChange}

src/app/components/ToolBoxPanel/components/allocationsperiods/index.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 export function AllocationsPeriods() {
+  const cmsData = useCMSData({ returnData: true });
+
   const dataPeriodOptions = useStoreState(
     (state) => get(state.AllocationsPeriods.data, "data", []) as string[]
   );
@@ -22,7 +25,7 @@ export function AllocationsPeriods() {
 
   return (
     <ToolBoxPanelAggregateBy
-      title="Period"
+      title={get(cmsData, "componentsSidebar.aggregateByPeriod", "")}
       selected={selectedPeriod}
       setSelected={setSelectedPeriod}
       options={dataPeriodOptions.map((period: string) => ({

src/app/components/ToolBoxPanel/components/donormaptypes/index.tsx

@@ -1,8 +1,11 @@
 import React from "react";
+import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 export function ToolBoxPanelDonorMapTypes() {
+  const cmsData = useCMSData({ returnData: true });
   const checked = useStoreState(
     (state) => state.ToolBoxPanelDonorMapTypeState.value
   );
@@ -12,7 +15,7 @@ export function ToolBoxPanelDonorMapTypes() {
 
   return (
     <ToolBoxPanelAggregateBy
-      title="Types"
+      title={get(cmsData, "componentsSidebar.aggregateByTypes", "")}
       selected={checked}
       setSelected={setChecked}
       options={[

src/app/components/ToolBoxPanel/components/donormapviews/index.tsx

@@ -1,8 +1,11 @@
 import React from "react";
+import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 export function ToolBoxPanelDonorViews() {
+  const cmsData = useCMSData({ returnData: true });
   const checked = useStoreState(
     (state) => state.ToolBoxPanelDonorMapViewState.value
   );
@@ -12,7 +15,7 @@ export function ToolBoxPanelDonorViews() {
 
   return (
     <ToolBoxPanelAggregateBy
-      title="Aggregate by"
+      title={get(cmsData, "componentsSidebar.aggregateBy", "")}
       selected={checked}
       setSelected={setChecked}
       options={[

src/app/components/ToolBoxPanel/components/eligibilityadvanced/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
+import get from "lodash/get";
 import { appColors } from "app/theme";
+import { useCMSData } from "app/hooks/useCMSData";
 import Checkbox from "@material-ui/core/Checkbox";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 
 export function ToolBoxPanelEligibilityAdvanced() {
+  const cmsData = useCMSData({ returnData: true });
   const checked = useStoreState(
     (state) => state.ToolBoxPanelEligibilityAdvancedCheckboxState.value
   );
@@ -46,7 +49,7 @@ export function ToolBoxPanelEligibilityAdvanced() {
         }
       `}
     >
-      <b>Advanced</b>
+      <b>{get(cmsData, "componentsSidebar.advancedLabel", "")}</b>
       <FormControlLabel
         control={
           <Checkbox
@@ -56,7 +59,7 @@ export function ToolBoxPanelEligibilityAdvanced() {
             onChange={handleChange}
           />
         }
-        label="Show disease burden and income level"
+        label={get(cmsData, "componentsSidebar.showDiseaseLabel", "")}
       />
     </div>
   );

src/app/components/ToolBoxPanel/components/eligibilityyear/index.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import get from "lodash/get";
+import { useCMSData } from "app/hooks/useCMSData";
 import { useStoreState, useStoreActions } from "app/state/store/hooks";
 import { ToolBoxPanelAggregateBy } from "app/components/ToolBoxPanel/components/aggregateby";
 
 export function EligibilityYear() {
+  const cmsData = useCMSData({ returnData: true });
   const dataYearOptions = useStoreState(
     (state) => get(state.EligibilityYears.data, "data", []) as string[]
   );
@@ -15,13 +17,14 @@ export function EligibilityYear() {
     (actions) => actions.ToolBoxPanelEligibilityYearState.setValue
   );
 
-  React.useEffect(() => setSelectedYear(get(dataYearOptions, "[0]", "2020")), [
-    dataYearOptions,
-  ]);
+  React.useEffect(
+    () => setSelectedYear(get(dataYearOptions, "[0]", "2020")),
+    [dataYearOptions]
+  );
 
   return (
     <ToolBoxPanelAggregateBy
-      title="Year"
+      title={get(cmsData, "componentsSidebar.aggregateByYear", "")}
       selected={selectedYear}
       setSelected={setSelectedYear}
       options={dataYearOptions.map((year: string) => ({

src/app/components/ToolBoxPanel/components/filters/common/expandedgroup/index.tsx

@@ -1,11 +1,14 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from "react";
+import get from "lodash/get";
 import find from "lodash/find";
 import remove from "lodash/remove";
 import isEqual from "lodash/isEqual";
+import { appColors } from "app/theme";
 import { useRecoilState } from "recoil";
 import findIndex from "lodash/findIndex";
+import { useCMSData } from "app/hooks/useCMSData";
 import Checkbox from "@material-ui/core/Checkbox";
 import { ResetIcon } from "app/assets/icons/Reset";
 import { SearchIcon } from "app/assets/icons/Search";
@@ -20,7 +23,6 @@ import {
   FilterGroupProps,
   FilterOptionProps,
 } from "app/components/ToolBoxPanel/components/filters/data";
-import { appColors } from "app/theme";
 
 interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps {
   goBack: () => void;
@@ -29,7 +31,7 @@ interface ExpandedFilterGroupProps extends FilterGroupModel, FilterGroupProps {
 export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
   const [value, setValue] = React.useState("");
   const [allSelected, setAllSelected] = React.useState(false);
-
+  const cmsData = useCMSData({ returnData: true });
   const [optionsToShow, setOptionsToShow] = React.useState(props.options);
   const [expandedGroup] = useRecoilState(filterExpandedGroup);
   const {
@@ -461,7 +463,7 @@ export function ExpandedFilterGroup(props: ExpandedFilterGroupProps) {
               font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
             `}
           >
-            Apply
+            {get(cmsData, "componentsSidebar.applyButton", "")}
           </button>
         </>
       )}

src/app/components/ToolBoxPanel/components/filters/data.ts

@@ -1,4 +1,4 @@
-import { filter } from "lodash";
+import filter from "lodash/filter";
 
 export interface FilterGroupOptionModel {
   label: string;

src/app/components/ToolBoxPanel/components/filters/index.tsx

@@ -4,6 +4,7 @@ import isEqual from "lodash/isEqual";
 import { appColors } from "app/theme";
 import { useRecoilState } from "recoil";
 import Button from "@material-ui/core/Button";
+import { useCMSData } from "app/hooks/useCMSData";
 import { ResetIcon } from "app/assets/icons/Reset";
 import { filterExpandedGroup } from "app/state/recoil/atoms";
 import { useFilterOptions } from "app/hooks/useFilterOptions";
@@ -19,7 +20,7 @@ interface ToolBoxPanelFiltersProps {
 
 export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
   const filterOptions = useFilterOptions({ returnFilterOptions: true });
-
+  const cmsData = useCMSData({ returnData: true });
   const [expandedGroup, setExpandedGroup] = useRecoilState(filterExpandedGroup);
   const actions = useStoreActions((store) => store.AppliedFiltersState);
   const data = useStoreState((state) => state.AppliedFiltersState);
@@ -95,15 +96,15 @@ export function ToolBoxPanelFilters(props: ToolBoxPanelFiltersProps) {
               }
             `}
           >
-            <b>Filters</b>
+            <b>{get(cmsData, "componentsSidebar.filters", "")}</b>
             <Button
               endIcon={<ResetIcon />}
               onClick={resetAllFilters}
               css={`
                 text-transform: capitalize;
               `}
             >
-              Reset filters
+              {get(cmsData, "componentsSidebar.resetFilters", "")}
             </Button>
           </div>
           {props.groups.map((group: FilterGroupProps) => (