[Platform]: update footer to dissplay API version and homebox to show data iteration (#853)

Author: carcruz

apps/platform/src/pages/HomePage/Version.tsx

@@ -5,6 +5,7 @@ import { Link, useAPIMetadata } from "ui";
 interface VersionData {
   month: number;
   year: number;
+  iteration: string;
 }
 
 function getVersion({ month, year }: VersionData): string {
@@ -33,12 +34,14 @@ interface VersionLinkProps {
   year: number;
   version: string;
   link: string;
+  iteration: string;
 }
 
-function VersionLink({ month, year, version, link }: VersionLinkProps): JSX.Element {
+function VersionLink({ month, year, version, iteration, link }: VersionLinkProps): JSX.Element {
+  const parsedIteration = iteration && iteration !== "" ? `.${iteration}` : "";
   return (
     <Link external to={link}>
-      {month} 20{year} ({version})
+      {month} 20{year} ({version}{parsedIteration}) 
     </Link>
   );
 }
@@ -65,13 +68,13 @@ function Version({
   const { month, year } = version;
 
   const parsedVersion = getVersion({ month, year });
-  const fullMonth = getFullMonth({ month, year });
+  const fullMonth = getFullMonth({ month, year });;
 
   return (
     <VersionContainer>
       <Typography variant="body2">
         Last update:{" "}
-        <VersionLink link={releaseNotesURL} month={fullMonth} year={year} version={parsedVersion} />
+        <VersionLink link={releaseNotesURL} month={fullMonth} year={year} version={parsedVersion} iteration={version.iteration} />
       </Typography>
     </VersionContainer>
   );

packages/ui/src/components/Footer.tsx

@@ -8,6 +8,7 @@ import { EmailLink } from "./EmailLink";
 
 import PrivateWrapper from "./PrivateWrapper";
 import { useConfigContext } from "../providers/ConfigurationProvider";
+import { useAPIMetadata } from "../providers/APIMetadataProvider";
 
 const FOOTER_BACKGROUND_COLOR = "#2e2d35";
 
@@ -197,11 +198,13 @@ const LicenseCC0 = ({ link }: LicenseCC0Props) => {
   );
 };
 
-const UIVersion = () => {
+const DeployedVersion = () => {
   const { config } = useConfigContext();
+  const { version: { apiVersion } } = useAPIMetadata();
   return (
     <Typography color="inherit" variant="caption">
-      <b>{config?.gitVersion}</b>
+      <b>UI: </b>{config?.gitVersion}<br/>
+      <b>API: </b>{apiVersion.x}.{apiVersion.y}.{apiVersion.z}
     </Typography>
   );
 };
@@ -224,7 +227,7 @@ const Footer = ({ externalLinks }: FooterProps) => {
       <Grid item container xs={12} md={10} spacing={2}>
         <FooterSection heading="About" links={externalLinks.about}>
           <LicenseCC0 link={externalLinks.license} />
-          <UIVersion />
+          <DeployedVersion />
         </FooterSection>
         <FooterSection heading="Help" links={externalLinks.help} social={externalLinks.social} />
         <FooterSection heading="Partners" links={externalLinks.partners} />

packages/ui/src/providers/APIMetadataProvider.tsx

@@ -8,28 +8,50 @@ const DATA_VERSION_QUERY = gql`
       dataVersion {
         month
         year
+        iteration
+      }
+      apiVersion {
+        x
+        y
+        z
       }
     }
   }
 `;
 
+type APIVersion = {
+  x: string;
+  y: string;
+  z: string;
+};
+
 type Version = {
   month: string;
   year: string;
+  iteration: string;
   loading: boolean;
   error: ApolloError | null;
-};
+  apiVersion: APIVersion;
+};  
 
 type ContextType = {
   version: Version;
 };
 
+const initialAPIVersion: APIVersion = {
+  x: "0",
+  y: "0",
+  z: "0",
+};
+
 const initialState: ContextType = {
   version: {
     loading: false,
     error: null,
     month: "0",
     year: "0",
+    iteration: "0",
+    apiVersion: initialAPIVersion,
   },
 };
 export const APIMetadataContext = createContext<ContextType | undefined>(undefined);
@@ -51,7 +73,8 @@ export const APIMetadataProvider = ({ children }: PropsWithChildren): JSX.Elemen
     }
     const {
       meta: {
-        dataVersion: { month, year },
+        dataVersion: { month, year, iteration },
+        apiVersion: apiVersion,
       },
     } = data;
 
@@ -60,6 +83,8 @@ export const APIMetadataProvider = ({ children }: PropsWithChildren): JSX.Elemen
       error: null,
       month: month,
       year: year,
+      iteration: iteration,
+      apiVersion: apiVersion,
     });
   }, [data, loading, error]);