From 38b277737eb755430d103db1b4b56923bd3c50ce Mon Sep 17 00:00:00 2001
From: Jenn Giardino <jgiardin@redhat.com>
Date: Tue, 15 Dec 2020 19:18:42 -0500
Subject: [PATCH] Updates release column in table to display a blue label

---
 .../CreateImageWizard/WizardStepImageOutput.js |  2 +-
 .../CreateImageWizard/WizardStepReview.js      |  4 ++--
 .../Release/Release.js                         | 18 ++++++++++++++++++
 src/SmartComponents/ImagesTable/ImagesTable.js |  3 ++-
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/PresentationalComponents/Release/Release.js

diff --git a/src/PresentationalComponents/CreateImageWizard/WizardStepImageOutput.js b/src/PresentationalComponents/CreateImageWizard/WizardStepImageOutput.js
index 7d43755b..a8de6545 100644
--- a/src/PresentationalComponents/CreateImageWizard/WizardStepImageOutput.js
+++ b/src/PresentationalComponents/CreateImageWizard/WizardStepImageOutput.js
@@ -5,7 +5,7 @@ import { Form, FormGroup, FormSelect, FormSelectOption, Title } from '@patternfl
 
 const WizardStepImageOutput = (props) => {
     const releaseOptions = [
-        { value: 'rhel-8', label: 'Red Hat Enterprise Linux (RHEL) 8.2' },
+        { value: 'rhel-8', label: 'Red Hat Enterprise Linux (RHEL) 8.3' },
     ];
     const uploadOptions = [
         { value: 'aws', label: 'Amazon Web Services' },
diff --git a/src/PresentationalComponents/CreateImageWizard/WizardStepReview.js b/src/PresentationalComponents/CreateImageWizard/WizardStepReview.js
index 1f2e623f..c50a18d7 100644
--- a/src/PresentationalComponents/CreateImageWizard/WizardStepReview.js
+++ b/src/PresentationalComponents/CreateImageWizard/WizardStepReview.js
@@ -8,7 +8,7 @@ import './WizardStepReview.scss';
 
 const WizardStepReview = (props) => {
     const releaseOptions = {
-        'rhel-8': 'Red Hat Enterprise Linux (RHEL) 8.2'
+        'rhel-8': 'Red Hat Enterprise Linux (RHEL) 8.3'
     };
     const uploadOptions = {
         aws: 'Amazon Web Services'
@@ -30,7 +30,7 @@ const WizardStepReview = (props) => {
                         Release
                     </dt>
                     <dd>
-                        { releaseOptions[props.release]}
+                        { releaseOptions[props.release] }
                     </dd>
                     <dt>
                         Target environment
diff --git a/src/PresentationalComponents/Release/Release.js b/src/PresentationalComponents/Release/Release.js
new file mode 100644
index 00000000..e2d8ea6b
--- /dev/null
+++ b/src/PresentationalComponents/Release/Release.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Label } from '@patternfly/react-core';
+
+const Release = (props) => {
+    const releaseOptions = {
+        'rhel-8': 'RHEL 8.3'
+    };
+    const release = releaseOptions[props.release] ? releaseOptions[props.release] : props.release;
+    return <Label color='blue'>{release}</Label>;
+};
+
+Release.propTypes = {
+    release: PropTypes.string,
+};
+
+export default Release;
diff --git a/src/SmartComponents/ImagesTable/ImagesTable.js b/src/SmartComponents/ImagesTable/ImagesTable.js
index f36deb14..2efcc8bd 100644
--- a/src/SmartComponents/ImagesTable/ImagesTable.js
+++ b/src/SmartComponents/ImagesTable/ImagesTable.js
@@ -7,6 +7,7 @@ import { Table, TableHeader, TableBody, classNames, Visibility } from '@patternf
 import { TableToolbar } from '@redhat-cloud-services/frontend-components';
 
 import ImageBuildStatus from '../../PresentationalComponents/ImageBuildStatus/ImageBuildStatus';
+import Release from '../../PresentationalComponents/Release/Release';
 
 import api from '../../api.js';
 
@@ -64,7 +65,7 @@ class ImagesTable extends Component {
                 cells: [
                     id,
                     compose.image_type,
-                    compose.distribution,
+                    { title: <Release release={ compose.distribution } /> },
                     { title: <ImageBuildStatus status={ compose.status } /> },
                     ''
                 ]