From a9c0b73af9d4fbcd3806c2a6ed1a3dda848c2035 Mon Sep 17 00:00:00 2001
From: SamoKopecky <skopecky@redhat.com>
Date: Thu, 5 Jan 2023 17:15:37 +0100
Subject: [PATCH] feat(ocm): Add a frontend indicator for cluster upgrades

Signed-off-by: SamoKopecky <skopecky@redhat.com>
---
 .../ClusterInfoCard/ClusterInfoCard.tsx       | 40 ++++++++++++++++++-
 .../TableCardFromData/TableCardFromData.tsx   |  6 +--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx b/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
index f50285000b..52194284fc 100644
--- a/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
+++ b/plugins/ocm/src/components/ClusterInfoCard/ClusterInfoCard.tsx
@@ -1,15 +1,53 @@
 import React from 'react';
-
+import { Button, Grid, makeStyles, Tooltip } from '@material-ui/core';
+import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
 import { useCluster } from '../ClusterContext';
 import { TableCardFromData } from '../TableCardFromData';
 
+const useStyles = makeStyles({
+  button: {
+    textTransform: 'none',
+    borderRadius: 16,
+    margin: '0px',
+    paddingLeft: '4px',
+    paddingRight: '4px',
+  },
+});
+
 export const ClusterInfoCard = () => {
   const { data } = useCluster();
+  const classes = useStyles();
 
   if (!data) {
     return null;
   }
 
+  data.openshiftVersion = (
+    <>
+      {data.update?.available ? (
+        <Grid container direction="column" spacing={0}>
+          <Grid item>{data.openshiftVersion}</Grid>
+          <Grid item>
+            <Tooltip title={`Version ${data.update?.version!} available`}>
+              <Button
+                variant="text"
+                color="primary"
+                startIcon={<ArrowUpwardRoundedIcon style={{ fontSize: 22 }} />}
+                className={classes.button}
+                href={data.update?.url}
+                size="small"
+              >
+                Upgrade available
+              </Button>
+            </Tooltip>
+          </Grid>
+        </Grid>
+      ) : (
+        data.openshiftVersion
+      )}
+    </>
+  ) as any;
+
   const nameMap = new Map<string, string>([
     ['name', 'Name'],
     ['kubernetesVersion', 'Kubernetes version'],
diff --git a/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx b/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
index 31716c852a..bc5ac408d6 100644
--- a/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
+++ b/plugins/ocm/src/components/TableCardFromData/TableCardFromData.tsx
@@ -18,7 +18,7 @@ const valueFormatter = (value: any): any => {
       return <Link to={value}>{value}</Link>;
     }
   }
-  return value.toString();
+  return value;
 };
 
 export const TableCardFromData = ({
@@ -30,12 +30,12 @@ export const TableCardFromData = ({
   title: string;
   nameMap: Map<string, string>;
 }) => {
-  const parsedData: { name: string; value: string }[] = [];
+  const parsedData: { name: string; value: any }[] = [];
   const entries = Object.entries(data);
 
   nameMap.forEach((_, key) => {
     const entry = entries.find(e => e[0] === key)!;
-    // If key of the map doesnt have an prop in the cluster object, continue
+    // If key of the map doesn't have an prop in the cluster object, continue
     if (entry === undefined) {
       return;
     }