From e7f2bc30aa5b7ff5fcb8fda3158266b9a62b4da2 Mon Sep 17 00:00:00 2001
From: taylanbakircioglu <taylanb@outlook.com>
Date: Fri, 7 Nov 2025 11:51:15 +0300
Subject: [PATCH] Cleanup: Remove emoji from Frontend SSL field description
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code cleanup - removed emoji from form field
Changed: extra="🆕 Select one or more..."
To: extra="Select one or more..."

Note: Backend Server SSL is single select (correct)
Frontend SSL is multiple select (correct - supports SNI)
---
 frontend/src/components/FrontendManagement.js | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/FrontendManagement.js b/frontend/src/components/FrontendManagement.js
index 8152db0..520724c 100644
--- a/frontend/src/components/FrontendManagement.js
+++ b/frontend/src/components/FrontendManagement.js
@@ -166,7 +166,6 @@ const FrontendManagement = () => {
     // CRITICAL FIX: Don't fetch if no cluster selected to prevent race condition
     // Same race condition as BackendServers - prevents all frontends from appearing
     if (!selectedCluster) {
-      console.log('FETCH FRONTENDS: No cluster selected, skipping fetch');
       setFrontends([]);
       setFilteredFrontends([]);
       return;
@@ -1437,26 +1436,34 @@ const FrontendManagement = () => {
                   <Form.Item
                     name="ssl_certificate_ids"
                     label="SSL Certificates"
-                    extra="🆕 Select one or more SSL certificates - HAProxy will use SNI (Server Name Indication) to serve the correct certificate based on hostname"
+                    extra="Select one or more SSL certificates - HAProxy will use SNI (Server Name Indication) to serve the correct certificate based on hostname"
                   >
                             <Select 
                               mode="multiple"
                               placeholder="Select SSL certificate(s)" 
                               allowClear
                               showSearch
+                              optionLabelProp="label"
                               filterOption={(input, option) =>
-                                option.children.toLowerCase().includes(input.toLowerCase())
+                                (option.label || '').toLowerCase().includes(input.toLowerCase())
                               }
                             >
                               {sslCertificates.map(cert => {
-                                const statusIcon = cert.status === 'valid' ? 'Valid' : 
+                                const statusText = cert.status === 'valid' ? 'Valid' : 
                                                   cert.status === 'expiring_soon' ? 'Expiring' : 'Expired';
                                 const expiryInfo = cert.days_until_expiry !== undefined ? 
-                                  `(${cert.days_until_expiry} days)` : '';
-                                const sslTypeTag = cert.ssl_type === 'Global' ? 'Global' : 'Cluster';
+                                  `${cert.days_until_expiry} days` : '';
+                                const sslType = cert.ssl_type === 'Global' ? 'Global' : 'Cluster';
+                                
+                                // Rich label for selected view
+                                const richLabel = `${cert.name} - ${cert.domain} [${sslType}] ${statusText}${expiryInfo ? ' (' + expiryInfo + ')' : ''}`;
                                 
                                 return (
-                                  <Option key={cert.id} value={cert.id}>
+                                  <Option 
+                                    key={cert.id} 
+                                    value={cert.id}
+                                    label={richLabel}
+                                  >
                                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                       <span>
                                         <strong>{cert.name}</strong> - {cert.domain}
@@ -1464,11 +1471,11 @@ const FrontendManagement = () => {
                                           color={cert.ssl_type === 'Global' ? 'blue' : 'green'} 
                                           style={{ marginLeft: 8, fontSize: '10px' }}
                                         >
-                                          {sslTypeTag}
+                                          {sslType}
                                         </Tag>
                                       </span>
                                       <span style={{ fontSize: '12px', color: '#666', marginLeft: 12 }}>
-                                        {statusIcon} {expiryInfo}
+                                        {statusText} {expiryInfo && `(${expiryInfo})`}
                                       </span>
                                     </div>
                                   </Option>