From b95e49609bae722d9ce4a4299e023f1621b0c363 Mon Sep 17 00:00:00 2001
From: Mirjam Aulbach <mirjam.aulbach@aiven.io>
Date: Tue, 27 Feb 2024 15:01:05 +0700
Subject: [PATCH] fix(angular-ui): New enums for kafkaFlavor and clusterType
 break existing UI  (#2326)

* Add string instead of ENUM to cluster page.
* Add string instead of ENUM to cluster modify page.

---------

Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>
---
 core/src/main/resources/static/js/envs.js            |  9 +++++++++
 core/src/main/resources/static/js/modifyEnvs.js      | 10 +++++++++-
 core/src/main/resources/templates/clusters.html      |  8 ++++----
 core/src/main/resources/templates/modifyCluster.html | 12 ++++++------
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/core/src/main/resources/static/js/envs.js b/core/src/main/resources/static/js/envs.js
index c63da19a67..8a9b627c6c 100644
--- a/core/src/main/resources/static/js/envs.js
+++ b/core/src/main/resources/static/js/envs.js
@@ -4,6 +4,7 @@
 // edit 
 // solution for transaction
 // message store / key / gui
+
 var app = angular.module('envsApp',[]);
 
 app.directive('onReadFile', function ($parse) {
@@ -32,6 +33,14 @@ app.controller("envsCtrl", function($scope, $http, $location, $window) {
 
 	$scope.kafkaClusters = [ { label: 'Non-Aiven', value: 'nonaiven' }, { label: 'Aiven', value: 'aiven' }	];
 
+    $scope.kafkaFlavorToString = {
+        APACHE_KAFKA: "Apache Kafka",
+        AIVEN_FOR_APACHE_KAFKA: "Aiven for Apache Kafka",
+        CONFLUENT: "Confluent",
+        CONFLUENT_CLOUD: "Confluent Cloud",
+        OTHERS: "others",
+    };
+
 	// Set http service defaults
 	// We force the "Accept" header to be only "application/json"
 	// otherwise we risk the Accept header being set by default to:
diff --git a/core/src/main/resources/static/js/modifyEnvs.js b/core/src/main/resources/static/js/modifyEnvs.js
index e1e7111b55..e5009e6b5f 100644
--- a/core/src/main/resources/static/js/modifyEnvs.js
+++ b/core/src/main/resources/static/js/modifyEnvs.js
@@ -7,7 +7,15 @@
 var app = angular.module('modifyEnvsApp',[]);
 
 app.controller("modifyEnvsCtrl", function($scope, $http, $location, $window) {
-	
+
+    $scope.kafkaFlavorToString = {
+        APACHE_KAFKA: "Apache Kafka",
+        AIVEN_FOR_APACHE_KAFKA: "Aiven for Apache Kafka",
+        CONFLUENT: "Confluent",
+        CONFLUENT_CLOUD: "Confluent Cloud",
+        OTHERS: "others",
+    };
+
 	// Set http service defaults
 	// We force the "Accept" header to be only "application/json"
 	// otherwise we risk the Accept header being set by default to:
diff --git a/core/src/main/resources/templates/clusters.html b/core/src/main/resources/templates/clusters.html
index dfbfb60d10..9682e05a31 100644
--- a/core/src/main/resources/templates/clusters.html
+++ b/core/src/main/resources/templates/clusters.html
@@ -518,16 +518,16 @@ <h4 class="mb-3">Shortcuts</h4>
 										<td> {{ allenv.protocol}} </td>
 
 										<td ng-show="allenv.clusterType == 'KAFKA'" >
-											<span class="badge badge-success">{{ allenv.clusterType }}</span></td>
+											<span class="badge badge-success">Kafka</span></td>
 
 										<td ng-show="allenv.clusterType == 'SCHEMA_REGISTRY'" >
-											<span class="badge badge-info">{{ allenv.clusterType }}</span></td>
+											<span class="badge badge-info">Schema Registry</span></td>
 
 										<td ng-show="allenv.clusterType == 'KAFKA_CONNECT'" >
-											<span class="badge badge-warning">{{ allenv.clusterType }}</span></td>
+											<span class="badge badge-warning">Kafka Connect</span></td>
 
 
-										<td>{{ allenv.kafkaFlavor }}</td>
+										<td>{{ kafkaFlavorToString[allenv.kafkaFlavor] }}</td>
 
 										<td>{{ allenv.associatedServers }}</td>
 
diff --git a/core/src/main/resources/templates/modifyCluster.html b/core/src/main/resources/templates/modifyCluster.html
index 35b1a957d9..0477766927 100644
--- a/core/src/main/resources/templates/modifyCluster.html
+++ b/core/src/main/resources/templates/modifyCluster.html
@@ -525,8 +525,8 @@ <h4 class="mb-3">Shortcuts</h4>
 									<div class="row">
 										<div class="col-md-6">
 											<div class="form-group">
-												<label class="control-label">Kafka Flavor : </label>
-												<label><span class="badge badge-info">{{ clusterDetails.kafkaFlavor }}</span> </label>
+												<label class="control-label">Kafka Flavor: </label>
+												<label><span class="badge badge-info">{{ kafkaFlavorToString[clusterDetails.kafkaFlavor] }}</span> </label>
 											</div>
 										</div>
 									</div>
@@ -636,8 +636,8 @@ <h4 class="mb-3">Shortcuts</h4>
 									<div class="row">
 										<div class="col-md-6">
 											<div class="form-group">
-												<label class="control-label">Kafka Flavor : </label>
-												<label><span class="badge badge-info">{{ clusterDetails.kafkaFlavor }}</span> </label>
+												<label class="control-label">Kafka Flavor: </label>
+												<label><span class="badge badge-info">{{ kafkaFlavorToString[clusterDetails.kafkaFlavor] }}</span> </label>
 											</div>
 										</div>
 									</div>
@@ -712,8 +712,8 @@ <h4 class="mb-3">Shortcuts</h4>
 									<div class="row">
 										<div class="col-md-6">
 											<div class="form-group">
-												<label class="control-label">Kafka Flavor : </label>
-												<label><span class="badge badge-info">{{ clusterDetails.kafkaFlavor }}</span> </label>
+												<label class="control-label">Kafka Flavor: </label>
+												<label><span class="badge badge-info">{{ kafkaFlavorToString[clusterDetails.kafkaFlavor] }}</span> </label>
 											</div>
 										</div>
 									</div>